<template>
    <div class="img">
        <a-upload name="file" listType="picture-card" :multiple="isMultiple" :action="uploadAction"
            :headers="headers" :data="{biz:bizPath}" :fileList="fileList"
            :beforeUpload="beforeUpload" :disabled="disabled" :isMultiple="isMultiple"
            :showUploadList="isMultiple" @change="handleChange" @preview="handlePreview"
            :class="!isMultiple?'imgupload':''">
            <div
                :style="{'width':(!isMultiple?'104px':'auto'),'height':(!isMultiple?'104px':'auto')}">
                <img v-if="!isMultiple && picUrl" :src="getAvatarView()"
                    style="width:100%;height:100%" />
                <div v-else class="iconp">
                    <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">{{ text }}</div>
                </div>
            </div>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
                <viewer :options="options" class="viewer" ref="viewer">
                    <img :src="previewImage" :data-source="previewImage"
                        style="width:100%;height:100%" />
                </viewer>
            </a-modal>
        </a-upload>
    </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { getFileAccessHttpUrl } from '@/api/manage'

const uidGenerator = () => {
    return '-' + parseInt(Math.random() * 10000 + 1, 10);
}
const getFileName = (path) => {
    if (path.lastIndexOf("\\") >= 0) {
        let reg = new RegExp("\\\\", "g");
        path = path.replace(reg, "/");
    }
    return path.substring(path.lastIndexOf("/") + 1);
}
export default {
    name: 'JImageUpload',
    data() {
        return {
            options: { url: 'data-source' },
            uploadAction: window._CONFIG['domianURL'] + "/sys/common/upload",
            uploadLoading: false,
            picUrl: false,
            headers: {},
            fileList: [],
            previewImage: "",
            previewVisible: false,
        }
    },
    props: {
        text: {
            type: String,
            required: false,
            default: "上传"
        },
        /*这个属性用于控制文件上传的业务路径*/
        bizPath: {
            type: String,
            required: false,
            default: "temp"
        },
        value: {
            type: [String, Array],
            required: false
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false
        },
        isMultiple: {
            type: Boolean,
            required: false,
            default: false
        },
        //update-begin-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性，用于判断上传数量
        number: {
            type: Number,
            required: false,
            default: 0
        }
        //update-end-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性，用于判断上传数量
    },
    watch: {
        value: {
            handler(val, oldValue) {
                if (val instanceof Array) {
                    this.initFileList(val.join(','))
                } else {
                    this.initFileList(val)
                }
                if (!val || val.length == 0) {
                    this.picUrl = false;
                }
            },
            //立刻执行handler
            immediate: true
        }
    },
    created() {
        const token = Vue.ls.get(ACCESS_TOKEN);
        this.headers = { "X-Access-Token": token }
    },
    methods: {
        initFileList(paths) {
            if (!paths || paths.length == 0) {
                this.fileList = [];
                return;
            }
            this.picUrl = true;
            let fileList = [];
            let arr = paths.split(",")
            for (var a = 0; a < arr.length; a++) {
                let url = getFileAccessHttpUrl(arr[a]);
                fileList.push({
                    uid: uidGenerator(),
                    name: getFileName(arr[a]),
                    status: 'done',
                    url: url,
                    response: {
                        status: "history",
                        message: arr[a]
                    }
                })
            }
            this.fileList = fileList
        },
        beforeUpload: function (file) {
            var fileType = file.type;
            if (fileType.indexOf('image') < 0) {
                this.$message.warning('请上传图片');
                return false;
            }
        },
        handleChange(info) {
            this.picUrl = false;
            let fileList = info.fileList
            //update-begin-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选，返回选定的元素。
            if (this.number > 0 && this.isMultiple) {
                fileList = fileList.slice(-this.number);
            }
            //update-end-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选，返回选定的元素。
            if (info.file.status === 'done') {
                if (info.file.response.success) {
                    this.picUrl = true;
                    fileList = fileList.map((file) => {
                        if (file.response) {
                            file.url = file.response.message;
                        }
                        return file;
                    });
                }
                //this.$message.success(`${info.file.name} 上传成功!`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败.`);
            } else if (info.file.status === 'removed') {
                this.handleDelete(info.file)
            }
            this.fileList = fileList
            if (info.file.status === 'done' || info.file.status === 'removed') {
                this.handlePathChange()
            }
        },
        // 预览
        handlePreview(file) {
            this.previewImage = file.url || file.thumbUrl
            this.previewVisible = true
        },
        getAvatarView() {
            if (this.fileList.length > 0) {
                let url = this.fileList[0].url
                return getFileAccessHttpUrl(url)
            }
        },
        /* 图片预览 */
        getImgView(text) {
            if (text && text.indexOf(",") > 0) {
                text = text.substring(0, text.indexOf(","))
            }
            return getFileAccessHttpUrl(text)
        },
        handlePathChange() {
            let uploadFiles = this.fileList
            let path = ''
            if (!uploadFiles || uploadFiles.length == 0) {
                path = ''
            }
            let arr = [];
            if (!this.isMultiple) {
                arr.push(uploadFiles[uploadFiles.length - 1].response.message)
            } else {
                for (let a = 0; a < uploadFiles.length; a++) {
                    // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
                    if (uploadFiles[a].status === 'done') {
                        arr.push(uploadFiles[a].response.message)
                    } else {
                        return;
                    }
                    // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
                }
            }
            if (arr.length > 0) {
                path = arr.join(",")
            }
            this.$emit('change', path);
        },
        handleDelete(file) {
            //如有需要新增 删除逻辑
            console.log(file)
        },
        handleCancel() {
            this.close();
            this.previewVisible = false;
        },
        close() {

        },
    },
    model: {
        prop: 'value',
        event: 'change'
    }
}
</script>

<style scoped>
/* update--begin--autor:lvdandan-----date:20201016------for：j-image-upload图片组件单张图片详情回显空白
  * https://github.com/zhangdaiscott/jeecg-boot/issues/1810
  * https://github.com/zhangdaiscott/jeecg-boot/issues/1779
  */
/deep/ .imgupload .ant-upload-select {
    display: block;
}
/deep/ .imgupload .ant-upload.ant-upload-select-picture-card {
    width: 120px;
    height: 120px;
}
/deep/ .imgupload .iconp {
    padding: 32px;
}
/* update--end--autor:lvdandan-----date:20201016------for：j-image-upload图片组件单张图片详情回显空白*/
</style>
